<template>
  <dv-full-screen-container class="container" :key="key">
    <div
      class="tit"
      style="height: 10%; display: flex; justify-content: space-between"
    >
      <dv-decoration-8 style="width: 300px; height: 50px" />
      自然资源大屏平台
      <dv-decoration-8 :reverse="true" style="width: 300px; height: 50px" />
    </div>
    <div class="data_content" style="height: 90%">
      <div class="left" style="flex: 1; height: 100%">
        <div class="bor item">
          <dv-border-box-8 :key="key">
            <div style="height: 20px">
              <commonTitle :title="title.title1"></commonTitle></div>
            <div style="height: calc(100% - 22px)">
              <dv-active-ring-chart
                :config="leftConfig1"
                style="width: 100%; height: 100%"
              />
            </div>
          </dv-border-box-8>
        </div>
        <div class="bor item">
          <dv-border-box-8 :key="key">
            <div style="height: 20px">
              <commonTitle :title="title.title2"></commonTitle></div>
            <leftItem1 style="height: calc(100% - 22px)"></leftItem1>
          </dv-border-box-8>
        </div>
        <div class="bor item">
          <dv-border-box-8 :key="key">
            <div style="height: 20px">
              <commonTitle :title="title.title3"></commonTitle></div>
            <dv-capsule-chart 
              :config="leftConfig2"
              style="width: 90%; height: calc(100% - 37px); margin: 15px auto 0"
            />
          </dv-border-box-8>
        </div>
      </div>

      <div class="mid" style="flex: 2; height: 100%">
        <dv-border-box-8 :key="key">
          <midMap></midMap>
        </dv-border-box-8>
      </div>
      <div class="right" style="flex: 1; height: 100%">
        <div class="bor item">
          <dv-border-box-8 :key="key">
            <div style="height: 20px">
              <commonTitle :title="title.title4"></commonTitle></div>
            <rightItem1 style="width:95%;height: calc(100% - 22px);margin:0 auto"></rightItem1>
          </dv-border-box-8>
        </div>
        <div class="bor item">
          <dv-border-box-8 :key="key">
            <div style="height: 20px">
              <commonTitle :title="title.title5"></commonTitle></div>
            <dv-scroll-board style="width:97%;height: calc(100% - 40px); margin: 15px auto 10px"
              :config="rightConfig1"
            />
          </dv-border-box-8>
        </div>
        <div class="bor item">
          <dv-border-box-8 :key="key">
            <div style="height: 20px">
              <commonTitle :title="title.title6"></commonTitle></div>
            <rightItem2 style="height: calc(100% - 22px)"></rightItem2>
          </dv-border-box-8>
        </div>
      </div>
    </div>
  </dv-full-screen-container>
</template>
<script>
import leftItem1 from "./leftDiv.vue";
import midMap from "./mainDiv.vue";
import rightItem1 from "./rightDiv.vue";
import rightItem2 from "./rightDiv2.vue";
import commonTitle from "./commonTitle.vue"
export default {
  components: { leftItem1, midMap, rightItem1,rightItem2,commonTitle },
  data() {
    return {
      key:1,
      leftConfig1: {
        data: [
          {
            name: "周口",
            value: 55,
          },
          {
            name: "南阳",
            value: 120,
          },
          {
            name: "西峡",
            value: 78,
          },
          {
            name: "驻马店",
            value: 66,
          },
          {
            name: "新乡",
            value: 80,
          },
        ],
      },
      leftConfig2: {
        data: [
          {
            name: "南阳",
            value: 167,
          },
          {
            name: "周口",
            value: 67,
          },
          {
            name: "漯河",
            value: 123,
          },
          {
            name: "郑州",
            value: 55,
          },
          {
            name: "西峡",
            value: 98,
          },
        ],
        grid:{
          top:'30'
        }
      },
      rightConfig1: {
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
      },
      title:{
        title1:'当日情况',
        title2:'当日情况2',
        title3:'当日情况3',
        title4:'当日情况4',
        title5:'当日情况5',
        title6:'当日情况6',
      }
    };
  },
  mounted() {
    let _this = this;
    window.addEventListener("resize", function () {
        _this.$nextTick(()=>{
          _this.key++
        })

      });
  },
  methods: {
    initChart() {
      let option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          top: 15,
          // data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#fff",
              },
            },
          },
        ],
        series: [
          {
            name: "Email",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [120, 132, 101, 134, 90, 230, 210],
          },
          {
            name: "Union Ads",
            type: "line",
            stack: "Total",
            areaStyle: {},
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290, 330, 310],
          },
        ],
      };
      this.myChart.setOption(option);
    },
  },
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.container {
  height: 100% !important;
  width: 100% !important;
  background-color: black;
  color: #fff;
  transform: none !important;
  transition: all 0.2s linear;
  /* transition-duration:1s; */
	/* transition-timing-function:linear; */
}
.tit {
  align-items: center;
  font-size: 30px;
  font-weight: 900;
}
.data_content {
  display: flex;
  justify-content: space-between;
}
.left,
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.left .item,
.right .item {
  height: 33%;
}
</style>